<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript">
function initLogs()
{
	jgrouse.log.addHandler(new jgrouse.logHandlers.ConsoleLog());
}

jgrouse_config = 
{
	initLogs : initLogs,
	logLevel : 'INFO',
	nologs : false,
	debug : true
}
</script>

<script type="text/javascript" src='../src/jgrouse.js'></script>
<script type="text/javascript" src='../src/log.js'></script>
<script type="text/javascript" src='../src/classloader.js'></script>
<script type="text/javascript" src='console/jgconsole.js' autoinit='link'></script>


<script type="text/javascript">


jgrouse.module(
{
	name:'testContainer', 
	requires:['jgrouse.widgets.StaticText', 'jgrouse.widgets.TemplateParser', 
			  'jgrouse.widgets.InputText', 'jgrouse.widgets.Container', 
			  'jgrouse.widgets.Button', 'jgrouse.widgets.Checkbox', 'jgrouse.widgets.Radiobutton', 'jgrouse.widgets.Filler'], 
	imports : ['jgrouse.widgets.TemplateParser'],  
	body:function(salt)
	{
		eval(salt);

		jgrouse.define('testContainer.Controller', 'jgrouse.util.BaseController', function(salt)
		{
			eval(salt);
			
			return {
				
				setPropOne : function(value)
				{
					if (!!value)
					{
						this._data.propOne = value;
						this._data.propTwo = value + ', bla!';
						//this._data.buttonDisabled = value? value.length % 2 == 1 : false;
						this._data.buttonValue = "input length=" + (value? value.length : 0);
					}
					else
					{
						this.setPropOne('null');
					}
					
				},
				
				onTriggerButton : function(value)
				{
					this.setPropOne("Roll!" + Math.round(Math.random() * 100));
				},
				
				setRadioValue : function(value)
				{
					this._data.radioValue = value;
					this._data.buttonDisabled = value === 'biteMe';
				}
			}
		});
	}
});

function doLayout()
{
	app.layout();
}


function initApp()
{
	var item = document.getElementById('appContainer');
	//container = new testContainer.View();
	if (!window.origTemplate)
	{
		origTemplate = item.innerHTML;
	}
	
	app = new jgrouse.widgets.Container();
	app.setTemplate(origTemplate);
	var controller = new jgrouse.util.BaseController();
	app.bind(new jgrouse.util.MvcDriver(controller));
	container = app.main;
	container.setData({propOne : 'hehehe', buttonValue:'banzai'});
	item.innerHTML = '';
	app.add(item);
	jgrouse.dom.Event.addListener(window, 'resize', doLayout);
}

function doRun()
{
	var s = document.getElementById('area').value;
	var r = eval(s);
	alert(r);
}

function doHide()
{
	container.remove(true);
}

</script>

</head>
<body>
	<div id="appContainer">
		<div id='zhopa'>zhopa</div>
		<div _jgtype="heightFiller" style="width: 100%; height:400px">
			<div style="background-color: aqua; width:320px" >
				div 1
			</div>
			<div _jg-filler='true' _min-width='10' >
				<table border="1" width="100%">
					<tr><td>
						<div  >
							<div _jgtype="container" _controller-class="testContainer.Controller" _jgmember="main"> 
								
									<input type='text' _jgtype='inputText' _bindings = 'value:propOne'>
									result:<span _jgtype='staticText' _bindings='value:propTwo' style="font-weight: bold; color: green;">stuff</span><br>
									<input type="button" _jgtype='button' _bindings='disabled:buttonDisabled; triggerClick:triggerButton; value:buttonValue' value="zhopa">
									<br>
									<label for="idref:checker" style="font-weight: bold">Set input to 34</label><input type="checkbox" _jgtype='checkbox' name='cbox' _bindings="modelValue:propOne" value="34" id='checker'>
									<div>
										<input type="radio" _jgtype="radio" name="radioOne2" _bindings="modelValue:radioValue" value='forOne' id='rb1'>
										<label for="idref:rb1">Radio one (value forOne)</label>
									</div>
									<div>
										<input type="radio" _jgtype="radio" name="radioOne3" _bindings="modelValue:radioValue" value='biteMe' id='rb2'>
										<label for="idref:rb2">Radio one (value biteMe)</label>
									</div>
									<div>
										<label for='idref:inp2'>Label for inp2</label>
										<input type="text" _jgtype="inputText" _bindings="value:radioValue" id='inp2' _jgmember="INP2">
									</div>
										
									<div style="color: red" id='r'>red!</div>
							</div>
						</div>
					</td></tr>
				</table>
			</div>
			<div style="background-color: lime; width:200px">
				div 2
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">

	jgrouse.require('testContainer', function()
	{
		initApp();
	});
</script>
</html>